bottom
|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS2 |
|
Значення
за умовчанням |
auto |
|
Наслідує |
Ні |
|
Застосовується |
До усіх
елементів |
|
Аналог
HTML |
Ні |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/visuren.html#propdef - bottom |
Опис
Встановлює
положення нижнього краю утримуваного елементу без урахування товщини рамок і
відступів. Відлік координат залежить від властивості position, воно зазвичай
набуває значення relative (відносне положення) або absolute (абсолютне
положення).
При відносному
позиціонуванні елементу, відлік ведеться від нижнього краю початкового
положення елементу (мал. 1), а при абсолютному - відносно нижнього краю вікна
документу (мал. 2). Якщо для батьківського елементу задане position: relative,
то абсолютне позиціонування дочірніх елементів визначає їх положення від
нижнього краю батька.
Мал. 1.
Значення bottom при відносному позиціонування елементу
Мал. 2.
Значення bottom при абсолютному позиціонування елементу
Якщо
одночасно задана властивість top і bottom зі значеннями відмінними від auto, то
властивість bottom ігнорується.
Синтаксис
bottom:
значення | відсотки | auto | inherit
Значення
Як значення
приймаються будь-які одиниці довжини, прийняті в CSS, - наприклад, піксели
(px), дюйми (in), пункти (pt) та ін. Значення властивості bottom може бути і
негативним, в цьому випадку можливі накладення різних елементів один на одного.
При завданні значення у відсотках, положення елементу обчислюється залежно від
висоти батьківського елементу.
auto Не змінює положення елементу.
inherit Наслідує значення батька.
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>bottom</title>
<style type="text/css">
# #layer {
bottom: 20px; /* Відстань від нижнього краю
вікна браузеру */
position: absolute; /* Абсолютне
позиціонування */
background: #f0f0f0; /* Колір фону */
padding: 7px; /* Полів навколо тексту */
border: solid 1px black; /* Параметрів
рамки */
}
</style>
</head>
<body>
<div id="layer">
Луцький національний технічний університет є одним із
найкращих професійних закладів освіти у місті Луцьку. </div>
</body>
</html>
Результат
цього прикладу показаний ні мал. 3.
Мал. 3.
Застосування властивості bottom
Об'єктна модель
[window.]document.getElementById("elementID").style.bottom
Браузери
У браузері
Internet Explorer 6 для елементів, що абсолютно позиціонуються, не можна
одночасно задати властивості top, left, right, bottom.
Internet
Explorer до сьомої версії включно не підтримує значення inherit.